<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- <u-sticky bgColor=white > -->
			<!-- 最上面的教室选择 -->
			<view style="display: flex;align-items: center;">
				<view style="display: flex;flex: 7;">
					<u-tabs  style="height:70rpx;" :current="current" :list="xiaoqu"
						scroll-y="true" lineWidth="50" lineColor="blue"
						:activeStyle="{ color: 'blue',  transform: 'scale(1)'}"
						:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="change">
					</u-tabs>
				</view>
				<picker  selector-type='select' :range="kecheng_fenlei_namelist" @change='xuanze_kechengfenlei_fun'>
					<view  style="display: flex;flex: 2;font-size: 23rpx;border: #c2c2c2 3rpx solid;padding: 5rpx 8rpx;">
						分类：{{kecheng_namefenlei}}
					</view>
				</picker>
				
			</view>
			<!-- 最下方的销课数据统计 -->
			<view style="display:flex;font-size: 26rpx; position: fixed;bottom:0;background-color:#c2c2c2;justify-content: center;align-items: center;width:749rpx;padding: 5rpx;">
				课销{{xiaokeshu}}，总课销:{{xiaokesum | formatPrice}}，课时:{{keshishu}}，课时费:{{keshifeisum}}
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 15rpx;">
				<view class="">
					<view style="display: flex;flex-direction: row;align-content: center;margin-top: 20rpx;font-size:26rpx;margin-left: 30rpx;">
						<picker mode='date' :value="earningDate"  selector-type='select' @change='bindEarningDateChange'>
							<view style="display: flex;align-items: center;justify-content: center; height:50rpx;width: 220rpx; box-shadow: 1px 1px 5px #c2c2c2;border-radius: 8rpx;margin: 0 10rpx 0 10rpx;">{{earningDate}}
							<uni-icons type="bottom"></uni-icons>
							</view>
						</picker>
						<view style="display: flex;align-items: center;">
							→
						</view>
						<picker mode='date' :value="earningDate1"  selector-type='select' @change='bindEarningDateChange1'>
							<view style="display: flex;align-items: center;justify-content: center; height:50rpx;width: 220rpx; box-shadow: 1px 1px 5px #c2c2c2;border-radius: 8rpx;margin: 0 10rpx 0 10rpx;">{{earningDate1}}
								<uni-icons type="bottom"></uni-icons>
							</view>
						</picker>
						<view style="display: flex;background-color: white;box-shadow: 2rpx 2rpx 2rpx 4rpx blue; border-radius: 10rpx;padding: 10rpx 20rpx; justify-content: center;align-items: center;margin-left:30rpx;font-size: 25rpx;" @click="sousuo()">
							确 认
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view style="display: flex;flex-direction: row;align-items: center;">
				<view style="display: flex;flex-direction: row;align-content: center;justify-content: center; margin-top: 20rpx;font-size: 26rpx;margin-left: 30rpx;">
					<view class="">
						<picker mode='date' :value="earningDate"  selector-type='select' @change='bindEarningDateChange'>
							<view style="display: flex;align-items: center;height:50rpx;width: 220rpx;box-shadow: 1px 1px 5px #c2c2c2;border-radius: 8rpx;margin: 0 10rpx 0 10rpx;">{{earningDate}}
							<uni-icons type="bottom"></uni-icons>
							</view>
						</picker>
						<view style="display: flex;align-items: center;">
							→
						</view>
					</view>
					<picker mode='date' :value="earningDate1"  selector-type='select' @change='bindEarningDateChange1'>
						<view style="display: flex;align-items: center;box-shadow: 1px 1px 5px #c2c2c2;padding: 5rpx 20rpx;border-radius: 8rpx;margin: 0 10rpx 0 10rpx;">{{earningDate1}}
							<uni-icons type="bottom"></uni-icons>
						</view>
					</picker>
					<view style="display: flex;background-color: white;box-shadow: 2rpx 2rpx 2rpx 4rpx blue; border-radius: 10rpx;padding: 10rpx 30rpx; justify-content: center;align-items: center;margin-left:30rpx;font-size: 25rpx;" @click="sousuo()">
						搜索
					</view>
				</view>
			</view> -->
			<view style="display: flex;justify-content: space-around;width:80%;margin:30rpx 10rpx 30rpx 30rpx;">
				<view :class="[biaoqian1 ? 'xuanzhong' : 'weixuanzhong']"  @click="tip1">
					本月
				</view>
				<view :class="[biaoqian2 ? 'xuanzhong' : 'weixuanzhong']"  @click="tip2">
					上月
				</view>
				<view :class="[biaoqian3 ? 'xuanzhong' : 'weixuanzhong']"  @click="tip3">
					上上月
				</view>
				<picker mode='date' :value="earningDate" fields="month"  selector-type='select' @change='xuanzeriqi'>
					<view :class="[biaoqian4 ? 'xuanzhong' : 'weixuanzhong']"  >
						{{shu1}}
					</view>
				</picker>
			</view>
		<!-- </u-sticky> -->
		<model v-if='detailshow' @colseModel='detailshow = false' >
			<view  @click="detailshow = false" style="font-size: 35rpx; position: fixed;z-index: 101; top:150rpx;right:60rpx;background-color: aqua;display: flex; width: 70rpx;height: 70rpx;border-radius: 50%;align-items: center;justify-content: center;color: white;">
				X
			</view>
			<scroll-view scroll-y="true" style="display: flex; " :style="{ height: phoneHeight + 'rpx' }">
				<view  style="display: flex;border-radius: 15rpx; width: 700rpx;margin: 50rpx auto;flex-direction: column;">
					<view v-for="(item,index) in xiaokelist1" :key=index  style="margin: 10rpx 30rpx 10rpx 30rpx;flex-direction: column">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view class="">
								<view class="">
									<text style="font-weight: bold;color: red;">{{item.name}}</text>
									，<text style="font-size: 25rpx;color: darkgray;">销课时间:{{item.xiaoketime}}</text>
								</view>
								<view style="margin-bottom:20rpx;margin-top: 10rpx;">
									单节课费用：<text style="font-weight: bold;">{{item.yikefeiyong}}</text> 元
								</view>
							</view>
						</view>
						<!-- 判断条件实现最后一个间隔线不出现 -->
						<view v-if="xiaokelist1.length!==index+1" style="display:flex;width: 660rpx;height: 1rpx;margin: 10rpx auto;background-color: lightgray;">
						</view>
					</view>
				</view>
			</scroll-view>
		</model>
		<!-- 搜索框 -->
		<!-- <view style="display: flex;width: 100%;background-color: white;margin-top: 20rpx;margin-bottom: 20rpx;">
			<view style="display: flex;width: 90%;margin: 10rpx auto;">
				<u-search :showAction="true" v-model="keyword" placeholder="请输入要搜索的关键词" actionText="搜索"
					:animation="false" @custom="sousuo" @search="sousuo"></u-search>
			</view>
		</view> -->
		<view  style="display: flex;box-shadow: 1px 1px 5px #c2c2c2;border-radius: 15rpx; width: 700rpx;margin: 10rpx auto 30rpx auto;flex-direction: column;">
			<view v-for="(item,index) in tongjilist" :key=index  style="margin: 10rpx 30rpx 10rpx 30rpx;flex-direction: column">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="">
						<view class="">
							<text style="font-weight: bold;color: blue;">{{item.jiaoxuelaoshiid[0]?item.jiaoxuelaoshiid[0].name:''}}</text>
							，<text style="font-size: 25rpx;color: darkgray;">Tel:{{item.jiaoxuelaoshiid[0]?item.jiaoxuelaoshiid[0].mobile:''}}</text>
						</view>
						<view style="display: flex;font-size: 25rpx;color: dimgray;">
							<text style="width: 240rpx; ">金额：{{item.totalScore  | formatPrice}}元，</text> 
							<text style="width: 240rpx;">人次：{{item.xiaokeshu}}课时</text> 
						</view>
						<view style="display: flex;margin-bottom: 10rpx; font-size: 25rpx;color: dimgray;">
							<text style="width: 240rpx; ">课时费：{{item.kexiaofei?item.kexiaofei:0}}元，</text> 
							<text style="width: 240rpx;">上课数：{{item.shangkeshu?item.shangkeshu:0}}次</text> 
						</view>
					</view>
					<view style="color: darkgrey;font-size: 28rpx;" @click="mingxi(item.jiaoxuelaoshiid[0]?item.jiaoxuelaoshiid[0]._id:'',index)">
						明细>>
					</view>
				</view>
				<view @click="xiaokemingxi(item.jiaoxuelaoshiid[0]._id,item1._id)" v-if="show[index]" v-for="(item1,index1) in kechenglist" :key=index1 style="display: flex;padding: 2rpx 5rpx; align-items: center; font-size: 26rpx;width: 100%;margin-bottom: 10rpx;color: #c2c2c2;">
					<view style="display: flex;flex: 1;">
							{{index1+1}}.
					</view>
					<view style="display: flex;flex: 15;">
						{{item1._id}}
					</view>
					<view style="display: flex;flex:5;justify-content: end; ">
						￥{{item1.total | formatPrice}}
					</view>
					
				</view>
				<!-- 判断条件实现最后一个间隔线不出现 -->
				<view v-if="tongjilist.length!==index+1" style="display:flex;width: 660rpx;height: 1rpx;margin: 10rpx auto;background-color: lightgray;">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				keshishu:0,
				keshifeisum:0,
				kecheng_fenlei_id:'',
				kecheng_fenlei_namelist:[],
				kecheng_namefenlei:'全部∨',
				xiaokeshu:0,
				xiaokesum:0, 
				current:0,
				xiaoqu:[],
				phoneHeight:0,
				detailshow:false,
				xiaokelist1:[],
				kechenglist:[],
				show:[],
				year:'',
				month:'',
				day:'',
				smonth:'',
				ssmonth:'',
				biaoqian1:true,
				biaoqian2:false,
				biaoqian3:false,
				biaoqian4:false,
				tongjilist:[],
				zongshouru:0,
				zongzhichu:0,
				keyword: '', //搜索框的关键词
				page:1,
				shu1:'选择>>',
				index:'',
				index1:'',
				earningDate:'起始日期',
				earningDate1:'终止日期',
				tuokeuserinfo:[],
				list1:[],
				list2:[],
				myxinyongka:[],
				myxinyongka1:[],
				leixing1:["改可用","改未还","还款","刷卡"],
				meiyi_userinfo:[],//判断登陆人信息
			}
		},
		async onLoad() {
			this.get_kechengfenlei_list()
			uni.getSystemInfo({ 
			      success: (res) => {
			        // 注意这里获得的高度宽度都是px，需要转换rpx
			        // console.log(res.screenHeight); // 屏幕高度，包含导航栏
			        // console.log(res.screenWidth); // 屏幕宽度
			        // console.log(res.windowHeight); // 可使用窗口高度，不包含导航栏
			        // console.log(res.windowWidth); // 可使用窗口宽度
			        // 可使用窗口高度，将px转换rpx
			        this.phoneHeight = (res.windowHeight * (750/res.windowWidth))
			      }
			    })
			const date = new Date();
			this.year = date.getFullYear();
			let month1 = (date.getMonth() + 1);
			this.month=month1<10?'0'+month1:month1
			this.day = date.getDate();
			this.smonth=month1==1?(this.year-1)+'-12':this.year+'-'+(month1<11?'0'+(month1-1):(month1-1))
			this.ssmonth=month1<3?(this.year-1)+'-'+(month1+10):this.year+'-'+(month1<12?'0'+(month1-2):(month1-2))
			this.xiaoqufun()
			// this.sousuo()
		},
		// 上拉触底
		onReachBottom() {
		},
		filters: {
			formatPrice(data) {
				if (typeof(data) === "number") {
					return parseFloat(data).toFixed(3).substring(0, parseFloat(data).toFixed(3).length - 1)
				}
				return 0.00;
			}
		},
		methods: {
			xuanze_kechengfenlei_fun: function(e) {
				this.kecheng_namefenlei=this.kecheng_fenlei_namelist[e.detail.value]
				this.kecheng_fenlei=this.kecheng_fenlei_list[e.detail.value]
				this.kecheng_fenlei_id=this.kecheng_fenlei._id
				this.sousuo()
			},
			get_kechengfenlei_list(){
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:42,
					}
				}).then(res=>{
					this.kecheng_fenlei_namelist=[]
					for(var i=0;i<res.result.data.length;i++){
						this.kecheng_fenlei_namelist.push(res.result.data[i].name)
					}
					this.kecheng_fenlei_list=res.result.data
				})
			},
			// 点击不同的校区时
			change(e){
				this.xiaoqu_zhanshi=[]
				if(e.name=='全部'){
					this.xiaoqu_zhanshi=this.wodexiaoqu
				}else{
					this.xiaoqu_zhanshi.push(e.name)
				}
				this.sousuo()
			},
			// 获取校区的信息
			async xiaoqufun(){
				const res=await uni.getStorageSync('aoyashengxiaoqu')
				this.xiaoqu=[]
				let arr=[]
				for(var i=0;i<res.result.data.length;i++){
					var cou=0
					for(var j=i+1;j<res.result.data.length;j++){
						if(res.result.data[i].name==res.result.data[j].name){
							cou=9
							break
						}
					}
					if(cou==0){
						this.xiaoqu.push(res.result.data[i])
						arr.push(res.result.data[i].name)
					}
				}
				this.wodexiaoqu=arr
				if(this.xiaoqu.length>1){
					this.xiaoqu.unshift ({
						name:'全部'
					})	
				}else{
					this.shu3=this.xiaoqu[0].name
				}	
				this.xiaoqu_zhanshi=this.wodexiaoqu
				this.tip1()
			},
			xiaokemingxi(a,b){
				this.xiaokelist1=[]
				this.detailshow=true
				uniCloud.callFunction({
					name:"sum",
					data:{
						leixing:4,//为6时，查找本用户符合条件的流水
						jiaoxuelaoshiid:a,
						kecheng:b,
						qishitime:this.earningDate+ ' 00:00:00',
						jieshutime:this.earningDate1+ ' 23:59:59',
					}
				}).then(res=>{
					this.xiaokelist1=res.result.data
				})
			},
			tip1(){
				this.tongjilist=[]
				this.kechenglist=[]
				this.earningDate = this.year+'-'+this.month+'-01'
				this.earningDate1 = this.year+'-'+this.month+'-'+( ['01','03','05','07','08','10','12'].includes(this.month)?'31':'30')
				this.biaoqian1=true
				this.biaoqian2=this.biaoqian3=this.biaoqian4=false
				console.log(this.earningDate,this.earningDate1);
				this.sousuo()
			},
			tip2(){
				this.tongjilist=[]
				this.earningDate = this.smonth+'-01'
				this.earningDate1 = ['01','03','05','07','08','10','12'].includes(this.smonth.substring(5,7))?this.smonth+'-31':this.smonth+'-30'
				this.kechenglist=[]
				this.biaoqian2=true
				this.biaoqian1=this.biaoqian3=this.biaoqian4=false
				console.log(this.earningDate,this.earningDate1);
				this.sousuo()
			},
			tip3(){
				this.tongjilist=[]
				this.kechenglist=[]
				this.earningDate = this.ssmonth+'-01'
				this.earningDate1 = ['01','03','05','07','08','10','12'].includes(this.ssmonth.substring(5,7))?this.ssmonth+'-31':this.ssmonth+'-30'
				this.biaoqian3=true
				this.biaoqian2=this.biaoqian1=this.biaoqian4=false
				console.log(this.earningDate,this.earningDate1);
				this.sousuo()
			},
			mingxi(e,n){
				console.log(e);
				this.kechenglist=[]
				if(this.show[n]==true){
					this.show[n]=false
					return
				}
				uni.showLoading({
					title:'加载中……',
					mask:true
				})
				for(let i=0;i<this.tongjilist.length;i++){
					if(n==i){
						this.show[i]=true
					}else{
						this.show[i]=false
					}
				}
				// 下面是统计一个老师，按课分组统计金额
				uniCloud.callFunction({
					name:"sum",
					data:{
						leixing:2,//为6时，查找本用户符合条件的流水
						qishitime:this.earningDate+ ' 00:00:00',
						jieshutime:this.earningDate1+ ' 23:59:59',
						weizhi:this.xiaoqu_zhanshi,
						id:e
					}
				}).then(res=>{
					this.kechenglist=res.result.data
					uni.hideLoading()
				})
			},
			queren(){
				this.page=1
				this.queren1()
			},
			sousuo(){
				if(this.earningDate=='起始日期'){
					uni.showToast({
						title: '请选择起始日期',
						icon: 'none',
						duration: 3000
					})
					return
				}
				if(this.earningDate1=='终止日期'){
					uni.showToast({
						title: '请选择终止日期',
						icon: 'none',
						duration: 3000
					})
					return
				}
				uni.showLoading({
					title:'数据加载中……',
					mask:true
				})
				this.tongjilist=[]
				// 一、统计老师指定时间内销课的费用和销课的数量；二、统计销课按分类ID、时间/校区的数量；三、按课程分类、时间、校区统计老师上课的费用和老师上课的课时数
				uniCloud.callFunction({
					name:"sum",
					data:{
						leixing:1,
						qishitime:this.earningDate+ ' 00:00:00',
						jieshutime:this.earningDate1+ ' 23:59:59',
						weizhi:this.xiaoqu_zhanshi,
						fenleiid:this.kecheng_fenlei_id
					}
				}).then(res=>{
					this.tongjilist=res.result.res.data
					this.xiaokeshu=res.result.res1.total
					for(var i=0;i<this.tongjilist.length;i++){
						for(var ii=0;ii<res.result.res2.data.length;ii++){
							if(res.result.res2.data[ii].laoshiid==this.tongjilist[i].jiaoxuelaoshiid[0]._id){
								this.tongjilist[i].kexiaofei=res.result.res2.data[ii].totalScore
								this.tongjilist[i].shangkeshu=res.result.res2.data[ii].shangkeshu
							}
						}
						
					}
					uni.hideLoading()
					if(!this.tongjilist.length){
						uni.hideLoading()
						uni.showToast({
							title: '未查询到数据',
							icon: 'none',
							duration: 3000
						})
						return
					}else{
						this.xiaokesum=0
						this.keshishu=0
						this.keshifeisum=0
						for(var i=0;i<this.tongjilist.length;i++){
							this.xiaokesum=this.tongjilist[i].totalScore+this.xiaokesum
							if(this.tongjilist[i].kexiaofei){
								this.keshifeisum=this.tongjilist[i].kexiaofei+this.keshifeisum
								this.keshishu=this.tongjilist[i].shangkeshu+this.keshishu
							}
						}
					}
				})
			},
			xuanzeriqi: function(e) {
				this.tongjilist=[]
				this.kechenglist=[]
				this.biaoqian4=true
				this.biaoqian1=this.biaoqian2=this.biaoqian3=false
				this.shu1 = e.target.value
				this.earningDate = this.shu1+'-01'
				this.earningDate1 = ['01','03','05','07','08','10','12'].includes(this.shu1.substring(5,7))?this.shu1+'-31':this.shu1+'-30'
			},
			bindEarningDateChange: function(e) {
				this.earningDate = e.target.value
				
			},
			bindEarningDateChange1: function(e) {
				this.earningDate1 = e.target.value
			},
		}
	}
</script>

<style>
	.xuanzhong{
		font-size: 25rpx;
		display: flex;
		padding: 9rpx 25rpx;
		justify-content: center;
		align-items: center;
		background-color:blue;
		border-radius: 15rpx;		
		color: white;
	}
	.weixuanzhong{
		font-size: 25rpx;
		display: flex;
		padding: 9rpx 25rpx;
		justify-content: center;
		align-items: center;
		border-color: blue;
		border-width: 3rpx;
		border-style: solid;
		border-radius: 15rpx;
		color: blue;
	}
</style>